<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .box {
            width: 300px;
            background-color: #ccc;
        }
        .red {
            background-color: red;
        }
        ul {
            padding-left: 0;
        }
        li {
            list-style: none;
        }
    </style>
<body>
   <!--  页面上有一些美女列表，当单击li时背景色变为红色，但点击按钮时会新增1个美女到列表最前面，并且单击新增的美女背景也会变为红色，
    1）要求使用到事件委托 -->
    <div class="box"> 
        <ul>
            <li class="red">123</li>
        </ul>
        <button>添加妹妹</button>
    </div>
    <script>
        //事件委托给父元素div
        var box = document.querySelector('.box')
        var ul = document.querySelector('ul')
        box.addEventListener('click', function(e) {
            //当子元素被点击时，由于事件冒泡，会触发div的点击事件，判断点击的节点名字
            if(e.target.nodeName == 'BUTTON') {
                var li = document.createElement('li')
                var mm = prompt('输入妹妹的名字')
                li.innerHTML = mm
                //添加到ul第一个子节点的前面
                ul.insertBefore(li, ul.children[0])
                //如果点击的是li，则进行排他
            } else if(e.target.nodeName == 'LI') {
                var red = document.querySelector('.red')
                red.className = ''
                e.target.className = 'red'
            }
        })
    </script>
</body>

</html>